<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>产品详情页面</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/sameStyle.css">
	<link rel="stylesheet" href="css/product.css">
	<link rel="stylesheet" type="text/css" href="fonts/iconfont.css">
</head>
<body>
	<!-- 顶部导航 -->
	<div class="top-nav">
		<div class="container">
			<!-- 头部导航左侧 -->
			<ul class="top-nav-l">
                <li class="menu">
                    <a href="""><span class="iconfont icon-start"></span>收藏鲜花网(hua.com)</a>
                </li>
                <li class="menu dropdown">
                    <a href=""><span class="iconfont icon-weixin"></span>关注微信</a>
                    <div class="dropdown-menu dropdown-weixin">
                        <img src="https://img02.hua.com/pc/pimg/wechat_qrcode.jpg" height="124" width="124">
                        <p>扫码关注<br>回复"礼物" 更多惊喜！</p>
                    </div>
                </li>
                <li class="menu dropdown">
                    <a href="" ><span class="iconfont icon-phone2"></span>花礼网app</a>
                    <div class="dropdown-menu dropdown-weixin">
                        <img src="https://img02.hua.com/pc/pimg/app_qrcode.jpg" height="124" width="124">
                        <p>新人专享100元APP礼包</p>
                    </div>
                </li>
            </ul>
            <!-- 头部导航左侧 -->
			<ul class="top-nav-r">
				<li class="menu login" id="LoginInfo"><a href="" >你好，请登录</a><a href="">注册</a></li>
				<li class="rborder"></li>
				<li class="menu"><a href="">订单查询</a></li>
				<li class="rborder"></li>
				<li class="menu dropdown"> <a href="" >我的花礼</a></li>
				<li class="rborder"></li>
				<li class="menu dropdown">
                    <a href="">客户服务<span class="glyphicon glyphicon-triangle-bottom"></span></a>
                    <div class="dropdown-menu dropdown-service">
                        <a href="">在线付款</a>
                        <a href="">帮助中心</a>
                        <a href="">售后服务</a>
                        <a href="">配送范围</a>
                        <a href="">留言反馈</a>
                    </div>
                </li>
                <li class="rborder"></li>
                <li class="menu dropdown">
                    <a href="" >
                    	<span class="iconfont icon-gouwuche"></span>购物车<span class="text-primary" id="gwcCount">(1)</span><span class="glyphicon glyphicon-triangle-bottom"></span>
                    </a>
                </li>
                <li class="rborder"></li>
                <li class="menu slogan"></li>
			</ul>
		</div>
	</div>
	<header>
		<div class="logo">
            <h1><a href="" class="logo-bd">鲜花</a></h1>
            <span></span>            
        	<h2>中国鲜花礼品网 始于2005，简称花礼网</h2>
        </div>
        <!--搜索框-->
        <div class="search">
			<form name="i_search" method="post" action="">
                <div class="input-group">
                    <input name="keyword" type="text" class="form-control" placeholder="商品关键词">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">搜索</button>
                    </span>
                </div>
            </form>
			<!-- 关键字部分 -->
			<span class="help-block">
       			 <a href="">红玫瑰</a> | <a href="">永生花</a> | <a href="">生日鲜花</a> | <a href="">金玫瑰</a>
    		</span>
        </div>
        <!-- 联系方式 -->
        <div class="service">
            <span class="iconfont icon-dianhua"></span>400-889-8188
            <span class="rborder"></span>
            <a href="" ><span class="iconfont icon-kefu"></span>在线客服</a>
        </div>
	</header>
	<!-- 导航条 -->
	<nav class="common">
      <div class="container">
      	<div class="categorys dropdown">
            <h3 class="categorys-title">
                <a href=""><span class="pull-right glyphicon glyphicon-menu-down iconfont icon-xiangxia"></span>全部商品导购</a>
            </h3>

            <div class="dropdown-menu dropdown-cate">
                <h4><a href="">鲜花</a></h4>
                <ul class="cate-list list-inline">
                    <li><a href="">爱情鲜花</a></li>
                    <li><a href="">友情鲜花</a></li>
                    <li><a href="">生日鲜花</a></li>
                    <li><a href="">问候长辈</a></li>
                    <li><a href="">祝贺鲜花</a></li>
                    <li><a href="">婚庆鲜花</a></li>
                    <li><a href="">探病慰问</a></li>
                    <li><a href="">道歉鲜花</a></li>
                    <li><a href="">开业花篮</a></li>
                </ul>               
                <h4><a href="">永生花</a></h4>
                <ul class="cate-list list-inline">
                    <li><a href="">经典花盒</a></li>
                    <li><a href="">巨型玫瑰</a></li>
                    <li><a href="">薰衣草</a></li>
                    <li><a href="">永生瓶花</a></li>
                    <li><a href="">特色永生花</a></li>
                </ul>
            </div>
        </div>
		<ul class="nav">
            <li><a href="">首页</a></li>
            <li><a href="">鲜花</a></li>
            <li><a href="">永生花</a></li>
            <li><a href="">蛋糕</a></li>
            <li><a href="">礼品</a></li>
            <li><a href="">巧克力</a></li>
            <li><a href="">花语大全</a></li>
            <li><a href="">设计师臻选鲜花</a></li>            
        </ul>
      </div>
	</nav>
	<!-- 主体盒子部分 -->
	<div class="container" id="mainbox">
		<!-- 返回首页标签
		<div class="backindex">			
			        <a href="list.html"><b>首页</b></a> &gt;<a href="">鲜花</a>&gt;
			        <span class="text-primary">甜美公主</span>
		</div>
		商品展示区域
		<div class="product-wrapper">
			产品图片区域
			<div class="product-l" id="content">
				<div class="content-wrapper">
					<div id="box">
						<img src="imgs/1-large.jpg" class="middle" width="430" height="430">
						<div id="filter"></div>
					</div>
					<div id="max">
						<img src="imgs/1-large.jpg" id="maxImg" style="width:860px;height:860px;">
					</div>
					<div class="img-list">
						<img src="imgs/1-small.jpg" class="small"  data-url="imgs/1-large.jpg">
						<img src="imgs/2-small.jpg" class="small"  data-url="imgs/2-large.jpg">
						<img src="imgs/3-small.jpg" class="small"  data-url="imgs/3-large.jpg">
						<img src="imgs/4-small.jpg" class="small"  data-url="imgs/4-large.jpg">
					</div>
				</div>				
		
		
			</div>
		
			产品详情参数区域
			<div class="product-r">
				<div class="title">
			                <h3 class="product-title">甜美公主白玫瑰22枝，粉佳人粉玫瑰14枝，粉色桔梗5枝</h3>
			                <p class="product-subtitle"></p>
		            	</div>
				<div class="attribute">
					<dl><dt>类 别：</dt><dd>鲜花 编 号：9012154</dd></dl>
					<dl><dt>材 料：</dt><dd>各色玫瑰共36枝：白玫瑰22枝，粉佳人粉玫瑰14枝；粉色桔梗5枝，尤加利0.5扎</dd></dl>
					<dl><dt>包 装：</dt><dd>绿色/浅绿色双面人造纸，白咖罗纹带花结</dd></dl>
					<dl><dt>花 语：</dt><dd>再多一点点距离，我就能靠近你。清晰甜美的空气里，爱你到不能呼吸。</dd></dl>
					<dl><dt>附 送：</dt><dd>下单填写留言，即免费赠送精美贺卡！</dd></dl>
					<dl><dt>配 送：</dt><dd>全国（可配送至全国2000多城市，<span class="color_hong">市区免配送费</span>）</dd>  </dl>
					<dl><dt>配送至：</dt><dd>请选择<span class="iconfont icon-xiangxia"></span></dd></dl>
					<dl> <dt>说明：</dt><dd><span class="text-primary">大城市至少提前1天订购，中小城市订购前请咨询客服</span></dd></dl>
					<dl id="tips" style="display:none;"><dt><span class="text-primary">价格说明：</span></dt><dd></dd></dl>
					<div class="price-wrap"></div>
				</div>
		
				价格部分
				<div class="price">
					<div class="price-original">市场价：￥485</div>
					<div class="price-sell">花礼价：<strong><em class="price-sign">¥</em><em class="price-num">378</em></strong></div>
				</div>
				app微信专享价
				<div class="appzx" id="wxappzx">
			                <ul>
			                    <li class="mu plft">
			                        <font style="color:#737373">促销信息：</font>
			                        <img src="https://img02.hua.com/pc/pimg/appzx_01.png" height="21" width="142" style="margin-top:-3px; margin-right:7px;">
			                        <span id="wxapp_share_price">￥<strong>370</strong></span>
			                    </li>
			                    <li class="mu dropdown clearZIndex">
			                        <a href="javascript:void(0)">
			                            <span class="iconfont icon-erweima"></span>去APP购买<i class="iconfont icon-xiangxia" style="margin-left:8px;height: 6px;width: 8px;"></i>
			                        </a>
			                        <div class="dropdown-menu dropdown-app">
			                            <img src="https://img02.hua.com/pc/pimg/app_qrcode.jpg" height="120" width="120">
			                            <p style="margin-top: 5px;margin-bottom: 0px; color:#737373;">新人专享100元大礼包</p>
			                        </div>
			                    </li>
			                    <li class="mu dropdown clearZIndex">
			                        <a href="javascript:void(0)">
			                            <span class="iconfont icon-erweima"></span>去微信购买<i class="iconfont icon-xiangxia" style="margin-left:8px;height: 6px;width: 8px;"></i>
			                        </a>
			                        <div class="dropdown-menu dropdown-weixin">
			                            <img src="https://m.hua.com/wxapi/tempqrpic?pid=9012154&amp;userid=&amp;type=1&amp;sj=2018-4-14&amp;sign=ca41449f9e9a24a8" height="120" width="120" id="wx_qrcode"><p style="margin-top: 0px;margin-bottom: 0px; color:#737373;">
			                                扫码关注<br>回复"礼物" 更多惊喜！
			                            </p>
			                        </div>
			                    </li>
			                </ul>
		           	 	</div>
				立即购买、收藏
				<div class="btn-buy">
			                <a href="" class="btn btn-primary btn-lg" id="Btn_AddToCart"><span class="iconfont icon-gouwuche"></span>立即购买</a>
			                <a href="javascript:DoGuanZhu('9012154')" class="btn btn-link" id="Btn_GuanZhu"><span class="iconfont icon-heart"></span>收 藏</a>
		            	</div>
			</div>
		
		
		
		
		</div> -->
	</div> 

</body>
</html>
<script>

  var obj = [{
    "id": "01",
    "title": "为爱相随----多头百合1枝，戴安娜粉玫瑰11枝",
    "minTitle":"为爱相随",
    "oldPrice": "￥229",
    "pirce": "￥179",
    "img": "imgs/01/01-1-large.jpg",
    "types": "鲜花 编 号：9012033",
    "material": "多头百合1枝，戴安娜粉玫瑰11枝，搭配适量黄莺、满天星",
    "pack": "内层淡紫色棉纸，外层粉色牛油瓦楞纸，紫红色缎带花结",
    "flowerLanguage": "你若不离，我必不弃。爱情是历经风雨的双手紧握；是一路同行的相濡以沫。"
}, {
    "id": "02",
    "title": "甜美公主----白玫瑰22枝，粉佳人粉玫瑰14枝，粉色桔梗5枝",
    "minTitle":"甜美公主",
    "oldPrice": "￥485",
    "pirce": "￥378",
    "img": "imgs/02/02-1-large.jpg",
    "types": "鲜花 编 号：9012154",
    "material": "各色玫瑰共36枝：白玫瑰22枝，粉佳人粉玫瑰14枝；粉色桔梗5枝，尤加利0.5扎",
    "pack": "绿色/浅绿色双面人造纸，白咖罗纹带花结",
    "flowerLanguage": "再多一点点距离，我就能靠近你。清晰甜美的空气里，爱你到不能呼吸。"
}, {
    "id": "03",
    "title": "真诚祝愿----花篮",
    "minTitle":"真诚祝愿",
    "oldPrice": "￥318",
    "pirce": "￥248",
    "img": "imgs/03/03-1-large.jpg",
    "types": "鲜花 编 号：9012054",
    "material": "粉色香水百合3枝，红色康乃馨11枝，天堂鸟2枝，跳舞兰5枝，填充适量红色多头康和香槟色桔梗，散尾葵（编织）4枝，绿叶适量",
    "pack": "有柄花篮一个（花篮款式以各城市实际出货为准）",
    "flowerLanguage": "所有美丽都源于真挚与坦诚，虽然幸福会转瞬即逝，快乐却能持久，一份诚挚的祝福，一份真诚的问候，愿你快乐每一天！"
}, {
    "id": "04",
    "title": "一往情深----精品玫瑰礼盒:19枝红玫瑰，勿忘我适量",
    "minTitle":"一往情深",
    "oldPrice": "￥315",
    "pirce": "￥245",
    "img": "imgs/04/04-1-large.jpg",
    "types": "鲜花-鲜花礼盒 编 号：9010966",
    "material": "高档礼盒装鲜花:19枝红玫瑰，勿忘我适量",
    "pack": "牛皮纸和深咖啡色条纹纸，银色缎带花结，魔力铁山灰包装盒",
    "flowerLanguage": "你的轻柔像阵微风，让我从容不迫，想让你知道，我对你始终一往情深。"
}, {
    "id": "05",
    "title": "浪漫的味道----香槟玫瑰33枝，红豆3枝",
    "minTitle":"浪漫的味道",
    "oldPrice": "￥465",
    "pirce": "￥362",
    "img": "imgs/05/05-1-large.jpg",
    "types": "鲜花 编 号：9010817",
    "material": "香槟玫瑰33枝，红豆3枝",
    "pack": "内层黄色不织布，外层灰蓝绝色纸，香芋紫人造双面纸，玻璃纸，白蓝色罗纹带",
    "flowerLanguage": "味道,像夏天的温暖,和春天的温润,忘不了的味道,在思念里萦绕!"
}, {
    "id": "06",
    "title": "花香四溢----粉色桔梗1扎",
    "minTitle":"花香四溢",
    "oldPrice": "￥203",
    "pirce": "￥158",
    "img": "imgs/06/06-1-large.jpg",
    "types": "鲜花 编 号：9012124",
    "material": "粉色桔梗1扎",
    "pack": "白色opp雾面纸 白绿罗纹带",
    "flowerLanguage": "花香四溢蝶儿飞，翩翩起舞令人醉，在这美丽的季节，寻找最美的你！"
}, {
    "id": "07",
    "title": "永远的幸福----白玫瑰9枝，蓝绣球1枝，黄金球5枝",
    "minTitle":"永远的幸福",
    "oldPrice": "￥251",
    "pirce": "￥196",
    "img": "imgs/07/07-1-large.jpg",
    "types": "鲜花 编 号：9012119",
    "material": "白玫瑰9枝，蓝绣球1枝，黄金球5枝，叶上花7枝",
    "pack": "内层白色雪梨纸， 外层蓝色绝色纸 玻璃纸 白绿宽罗纹带",
    "flowerLanguage": "真心付出，信仰着爱的呵护，你永远的幸福，是送我最好的礼物！"
}, {
    "id": "08",
    "title": "春韵----白色紫罗兰2扎、粉色洋桔梗1扎",
    "minTitle":"春韵",
    "oldPrice": "￥473",
    "pirce": "￥369",
    "img": "imgs/08/08-1-large.jpg",
    "types": "鲜花-特色鲜花 编 号：9012278",
    "material": "白色紫罗兰2扎、粉色洋桔梗1扎，斑春兰0.5扎（斑春兰如缺货可用尤加利替代）",
    "pack": "矮身圆肚玻璃花瓶系丝带",
    "flowerLanguage": "春天到了，爱会到达，会抵达牵挂。"
}];

//通过链接获取到？后面的id号
var pageId=location.href.split("?")[1];
var str="";
var box=document.getElementById("mainbox");
var slogan=document.querySelector(".slogan");
for(var i=0;i<obj.length;i++){
	if(obj[i].id==pageId){
		str=`<!-- 返回首页标签 -->
		<div class="backindex">			
	        <a href="list.html"><b>首页</b></a> &gt;<a href="">鲜花</a>&gt;
	        <span class="text-primary">${obj[i].minTitle}</span>
		</div>
		<!-- 商品展示区域 -->
		<div class="product-wrapper">
			<!-- 产品图片区域 -->
			<div class="product-l" id="content">
				<div class="content-wrapper">
					<div id="box">
						<img src="${obj[i].img}" class="middle" width="430" height="430">
						<div id="filter"></div>
					</div>
					<div id="max">
						<img src="${obj[i].img}" id="maxImg" style="width:860px;height:860px;">
					</div>
					<div class="img-list">
						<img src="imgs/${obj[i].id}/${obj[i].id}-1-small.jpg" class="small"  data-url="imgs/${obj[i].id}/${obj[i].id}-1-large.jpg">
						<img src="imgs/${obj[i].id}/${obj[i].id}-2-small.jpg" class="small"  data-url="imgs/${obj[i].id}/${obj[i].id}-2-large.jpg">
						<img src="imgs/${obj[i].id}/${obj[i].id}-3-small.jpg" class="small"  data-url="imgs/${obj[i].id}/${obj[i].id}-3-large.jpg">
						<img src="imgs/${obj[i].id}/${obj[i].id}-4-small.jpg" class="small"  data-url="imgs/${obj[i].id}/${obj[i].id}-4-large.jpg">
					</div>
				</div>				


			</div>

			<!-- 产品详情参数区域 -->
			<div class="product-r">
				<div class="title">
	                <h3 class="product-title">${obj[i].title}</h3>
	                <p class="product-subtitle"></p>
            	</div>
				<div class="attribute">
					<dl><dt>类 别：</dt><dd>${obj[i].types}</dd></dl>
					<dl><dt>材 料：</dt><dd>${obj[i].material}</dd></dl>
					<dl><dt>包 装：</dt><dd>${obj[i].pack}</dd></dl>
					<dl><dt>花 语：</dt><dd>${obj[i].flowerLanguage}</dd></dl>
					<dl><dt>附 送：</dt><dd>下单填写留言，即免费赠送精美贺卡！</dd></dl>
					<dl><dt>配 送：</dt><dd>全国（可配送至全国2000多城市，<span class="color_hong">市区免配送费</span>）</dd>  </dl>
					<dl><dt>配送至：</dt><dd>请选择<span class="iconfont icon-xiangxia"></span></dd></dl>
					<dl> <dt>说明：</dt><dd><span class="text-primary">大城市至少提前1天订购，中小城市订购前请咨询客服</span></dd></dl>
					<dl id="tips" style="display:none;"><dt><span class="text-primary">价格说明：</span></dt><dd></dd></dl>
					<div class="price-wrap"></div>
				</div>

				<!-- 价格部分 -->
				<div class="price">
					<div class="price-original">市场价：${obj[i].oldPrice}</div>
					<div class="price-sell">花礼价：<strong><em class="price-sign">¥</em><em class="price-num">${obj[i].pirce.substr(1)}</em></strong></div>
				</div>
				<!--app微信专享价 -->
				<div class="appzx" id="wxappzx">
	                <ul>
	                    <li class="mu plft">
	                        <font style="color:#737373">促销信息：</font>
	                        <img src="https://img02.hua.com/pc/pimg/appzx_01.png" height="21" width="142" style="margin-top:-3px; margin-right:7px;">
	                        <span id="wxapp_share_price">￥<strong>${Math.round(Number(obj[i].pirce.substr(1))*0.9)}</strong></span>
	                    </li>
	                    <li class="mu dropdown clearZIndex">
	                        <a href="javascript:void(0)">
	                            <span class="iconfont icon-erweima"></span>去APP购买<i class="iconfont icon-xiangxia" style="margin-left:8px;height: 6px;width: 8px;"></i>
	                        </a>
	                        <div class="dropdown-menu dropdown-app">
	                            <img src="https://img02.hua.com/pc/pimg/app_qrcode.jpg" height="120" width="120">
	                            <p style="margin-top: 5px;margin-bottom: 0px; color:#737373;">新人专享100元大礼包</p>
	                        </div>
	                    </li>
	                    <li class="mu dropdown clearZIndex">
	                        <a href="javascript:void(0)">
	                            <span class="iconfont icon-erweima"></span>去微信购买<i class="iconfont icon-xiangxia" style="margin-left:8px;height: 6px;width: 8px;"></i>
	                        </a>
	                        <div class="dropdown-menu dropdown-weixin">
	                            <img src="https://m.hua.com/wxapi/tempqrpic?pid=9012154&amp;userid=&amp;type=1&amp;sj=2018-4-14&amp;sign=ca41449f9e9a24a8" height="120" width="120" id="wx_qrcode"><p style="margin-top: 0px;margin-bottom: 0px; color:#737373;">
	                                扫码关注<br>回复"礼物" 更多惊喜！
	                            </p>
	                        </div>
	                    </li>
	                </ul>
           	 	</div>
				<!-- 立即购买、收藏 -->
				<div class="btn-buy">
	                <a href="" class="btn btn-primary btn-lg" id="Btn_AddToCart"><span class="iconfont icon-gouwuche"></span>立即购买</a>
	                <a href="javascript:DoGuanZhu('9012154')" class="btn btn-link" id="Btn_GuanZhu"><span class="iconfont icon-heart"></span>收 藏</a>
            	</div>
			</div>




		</div>`;
		slogan.innerHTML="鲜花-"+obj[i].minTitle;
	}
}
box.innerHTML=str;



function createOpen(){
	  // 添加类名open
    var drop=document.querySelectorAll(".dropdown");
      for(var i=0;i<drop.length;i++){
        drop[i].onmouseenter=function(){
            this.classList.add("open");
        }
        drop[i].onmouseleave=function(){
            this.classList.remove("open");
        }
      }
  }
createOpen();
  

















</script>

<script src="js/product.js"></script>
